<template>
  <div class="comprehensive-analysis">
    <div class="page-header">
      <h2>综合分析</h2>
      <div class="filter-section">
        <el-select v-model="selectedMovie" placeholder="选择电影" clearable>
          <el-option
            v-for="movie in movies"
            :key="movie.id"
            :label="movie.name"
            :value="movie.id"
          />
        </el-select>
      </div>
    </div>

    <el-row :gutter="20" class="chart-container">
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>票房与排片关系分析</span>
            </div>
          </template>
          <div class="chart" ref="correlationChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>多维度评估</span>
            </div>
          </template>
          <div class="chart" ref="radarChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="analysis-card">
          <template #header>
            <div class="card-header">
              <span>分析报告</span>
            </div>
          </template>
          <div class="analysis-content">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="总票房">
                <el-tag size="large">¥ 1.2亿</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="平均上座率">
                <el-tag size="large" type="success">45%</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="市场表现">
                <el-tag size="large" type="warning">良好</el-tag>
              </el-descriptions-item>
            </el-descriptions>
            <div class="analysis-text">
              <h4>分析结论</h4>
              <p>根据综合数据分析，该影片在市场上表现良好，具有以下特点：</p>
              <ul>
                <li>票房表现稳定，具有较强的市场竞争力</li>
                <li>排片率与上座率匹配度高，市场反应积极</li>
                <li>建议保持当前排片策略，持续关注市场反馈</li>
              </ul>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const selectedMovie = ref('')
const movies = ref([
  { id: 1, name: '电影1' },
  { id: 2, name: '电影2' },
  { id: 3, name: '电影3' }
])

const correlationChart = ref(null)
const radarChart = ref(null)

const loadAnalysisData = async () => {
  try {
    // TODO: 调用后端API获取分析数据
    initCharts()
  } catch (error) {
    console.error('加载分析数据失败：', error)
  }
}

const initCharts = () => {
  // 初始化票房与排片关系图表
  const correlationChartInstance = echarts.init(correlationChart.value)
  correlationChartInstance.setOption({
    title: { text: '票房与排片关系' },
    tooltip: { trigger: 'axis' },
    legend: { data: ['票房', '排片场次'] },
    xAxis: { type: 'category', data: ['一线城市', '二线城市', '三线城市', '四线城市', '五线城市'] },
    yAxis: [
      { type: 'value', name: '票房(万)' },
      { type: 'value', name: '场次' }
    ],
    series: [
      {
        name: '票房',
        type: 'line',
        data: [500, 320, 280, 150, 100]
      },
      {
        name: '排片场次',
        type: 'bar',
        yAxisIndex: 1,
        data: [150, 120, 100, 60, 40]
      }
    ]
  })

  // 初始化多维度评估雷达图
  const radarChartInstance = echarts.init(radarChart.value)
  radarChartInstance.setOption({
    title: { text: '多维度评估' },
    tooltip: { trigger: 'item' },
    radar: {
      indicator: [
        { name: '票房', max: 100 },
        { name: '口碑', max: 100 },
        { name: '上座率', max: 100 },
        { name: '排片率', max: 100 },
        { name: '市场份额', max: 100 }
      ]
    },
    series: [{
      type: 'radar',
      data: [{
        value: [80, 85, 70, 75, 65],
        name: '综合评估'
      }]
    }]
  })

  // 监听窗口大小变化，调整图表大小
  window.addEventListener('resize', () => {
    correlationChartInstance.resize()
    radarChartInstance.resize()
  })
}

onMounted(() => {
  loadAnalysisData()
})
</script>

<style scoped>
.comprehensive-analysis {
  padding: 20px;
}
</style>